<template>
     <div class="app-container">
        <div class="filter-container">
            <el-button class="filter-item" @click="Visibleadd = true" type="primary" icon="el-icon-plus">新增账号</el-button>
        </div>
        <el-dialog title="创建角色" :visible.sync="Visibleadd">
            <el-form :model="form">
                <el-form-item label="登录账号" :label-width="formLabelWidth">
                  <span style="display: inline-block">SHU</span><input v-model="form.userName"  class="put" minlength="3" placeholder="请输入账号（支持汉字、字母及数字）" />
                </el-form-item>
                 <el-form-item label="登录密码" :label-width="formLabelWidth">
                    <span>A123456</span>
                    
                </el-form-item>
                <span style="margin-left:120px">默认密码A123456，登录后可修改密码</span>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="Visibleadd = false">取 消</el-button>
                <el-button type="primary" @click="btn1(form.id)">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="设置角色" :visible.sync="Visible">
          
            <el-select clearable class="male filter-item" style="width: 160px" v-model="rolesId" placeholder="请选择角色">
                <el-option v-for="item in selectOption" :key="item.key" :label="item.roleName" :value="item.id">
                </el-option>
            </el-select>
            <div slot="footer" class="dialog-footer">
                <el-button @click="Visibleadd = false">取 消</el-button>
                <el-button type="primary" @click="btn()">确 定</el-button>
            </div>
        </el-dialog>
        <el-table :data="list"  border fit highlight-current-row  >
         
            <el-table-column align="center" label="序号" width="115" type="index" >

            </el-table-column>
            <el-table-column align="center" label="登录账号">
                <template slot-scope="scope">
                <span class="textdic">{{scope.row.subAccount}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="角色名称">
                <template slot-scope="scope">
                <span class="textdic" v-html="scope.row.roleName==null?'暂未设置':scope.row.roleName"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="账号开通时间">
                <template slot-scope="scope">
                <span class="textdic">{{scope.row.createTime}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="最后登录时间">
                <template slot-scope="scope">
                <span class="textdic">{{scope.row.updateTime}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="状态" width="115">
                <template slot-scope="scope">
                <span class="textdic" v-html="scope.row.accountStatus==0?'已开启':'已冻结'"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="280" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="handleTopping(scope.row)" v-show="scope.row.accountStatus!=0">开启</el-button>
                    <el-button size="mini" @click="handleTop(scope.row)" v-show="scope.row.accountStatus==0">冻结</el-button>
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">设置角色</el-button>
                    <el-button type="primary" size="mini" @click="handleRemove(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container" style="float:left">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.current" :page-sizes="[5,10,20,30,40]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      Visible: false,
      Visibleadd: false,
      list: [{}],
      columndata:[],
      defaultProps: {
        children: 'children',
        label: 'name'
        },
      selectOption:'',
      rolesId: '',
      id: '',
      total: 0,
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 10,
      },
      formLabelWidth: '120px',
      form: {
        userName: ''
      }
      
    }
  },
  created() {
    this.getList()
    this.getmuniList()
  },
  methods: {
    getList() {
      var that = this
      that.$post({
            api: "/sysUser/listSysUser",
            data: {
               ...that.listQuery
            }

        }).then(({ data }) => {
        if(data.code === 0){
            that.list = data.data.list
            that.total = data.data.total
        }
        console.log("listSysUser",data)
        });
    },
     getmuniList() {
      var that = this
      that.$post({
            api: "/role/listRoles",
        }).then(({ data }) => {
        if(data.code === 0){
            that.selectOption = data.data
        }
        console.log("listSysUser",data)
        });
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.currentPage = val
      this.getList()
    },
    handleUpdate(row) {
      this.Visible = true
      this.id = row.id
    //   selectLexicon({ id: row.id }).then(response => {
    //     this.form.tactfulDic = response.data.tactful_dic
    //     this.form.id = response.data.id
    //     console.log(this.form)
    //   })
    },
    handleTopping(row){
      var that = this
      that.$confirm('你确定开启此账号吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         that.$post({
            api: "	/sysUser/isAllowLogin",
            data: {
               userId: row.id,
               isAllowLogin: 0
            }
        }).then(({ data }) => {
          if(data.code === 0){
            that.getList()
            that.$notify({
              title: '成功',
              message: '开启成功',
              type: 'success',
              duration: 2000
            })
          }else {
            that.$message({
              type: "error",
              message: data.msg
            });
          }
          
        })
      }).catch(() => {
        that.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleTop(row){
      var that = this
      that.$confirm('你确定冻结此账号吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         that.$post({
            api: "	/sysUser/isAllowLogin",
            data: {
               userId: row.id,
               isAllowLogin: 2
            }
        }).then(({ data }) => {
          if(data.code === 0){
            that.getList()
            that.$notify({
              title: '成功',
              message: '冻结成功',
              type: 'success',
              duration: 2000
            })
          }else {
            this.$message({
              type: "error",
              message: data.msg
            });
          }
        })
      }).catch(() => {
        that.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    btn1(id) {
      this.Visibleadd = false
      var that = this
      that.$post({
            api: "/sysUser/addSysUser",
            data: {
               userName: 'SHU'+that.form.userName,
               loginPass: 'A123456'
            }

        }).then(({ data }) => {
        if(data.code === 0){
           that.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
            that.getList();
            that.form.userName = ''
        }else {
            this.$message({
              type: "error",
              message: data.msg
            });
          }
        console.log("listSysUser",data)
      });
    },
    btn() {
      this.Visible = false
      var that = this
      that.$post({
            api: "/sysUser/setRoles",
            data: {
               userId: that.id,
               rolesId: that.rolesId
            }

        }).then(({ data }) => {
        if(data.code === 0){
           that.$notify({
              title: '成功',
              message: '设置成功',
              type: 'success',
              duration: 2000
            })
            that.getList();
        }else {
            this.$message({
              type: "error",
              message: data.msg
            });
          }
      });
      that.rolesId = ''
    },
   
    handleRemove(row) {
      var that = this
      that.$confirm('你确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var userId = row.id
         that.$post({
            api: "/sysUser/delAccount",
            data: {
               userId: userId
            }

        }).then(({ data }) => {
          if(data.code === 0){
            that.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          }else {
            this.$message({
              type: "error",
              message: data.msg
            });
          }
        })
      }).catch(() => {
        that.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
.put{
  display: inline-block;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  width: 60%;
  margin-left: 10px;
}
</style>
